<template>
  <div class="flex h-full">
    <div class="w-60 bg-[#F7F9FE]"></div>
    <div class="flex h-full flex-1 flex-col overflow-hidden border-[1px] bg-[#F7F9FE] min-w-[724px]">
      <ChatHeader />
      <ChatContent :multipleCheckVisible="multipleCheckVisible" />
      <ChatFooter v-show="!multipleCheckVisible" />
    </div>
    <div>
      <ChatFriendInfo />
    </div>
  </div>
</template>

<script name="chat" setup lang="ts">
import ChatHeader from './components/ChatHeader.vue'
import ChatContent from './components/ChatContent.vue'
import ChatFooter from './components/ChatFooter/ChatFooter.vue'
import useConversationState from './useConversationState'
import ChatFriendInfo from './components/ChatFriendInfo/index.vue'

const { multipleCheckVisible } = useConversationState()
</script>